<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="__PUBLIC__/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="__PUBLIC__/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="__PUBLIC__/css/animate.min.css" rel="stylesheet">
    <link href="__PUBLIC__/css/style.min.css?v=4.1.0" rel="stylesheet">
    <style>
        .color{
            background-image: url(https://images.pexels.com/photos/1274260/pexels-photo-1274260.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
        }
        .img{
            max-width: 20px;
            max-height: 20px;
        }
        /* .hid{
            overflow: auto;
        } */
        img{
            width: 60px;
            height: 60px;
        }
    </style>

</head>

<body class="gray-bg color" >
<div class="row">
    <div class="col-sm-12" id="wall">
        <div class="wrapper wrapper-content animated fadeInUp">
            <ul class="notes">
                <li>
                    <div>
                        <p>你的昵称：</p>
                        <input type="text" v-model="nickname">
                        <p>心愿：</p>
                        <textarea v-model="content" cols="20" rows="4"></textarea>
                        <button class="btn btn-default btn-xs pull-right" v-on:click="push">放飞它</button>
                    </div>
                </li>
                <li v-for="list in wishes">
                    <div>
                        <small>{{list.time}}</small>
                        <h4></h4>
                        <p>{{list.content}}</p>
                        <a>----{{list.nickname}}</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="__PUBLIC__/js/jquery.min.js?v=2.1.4"></script>
<script src="__PUBLIC__/js/bootstrap.min.js?v=3.3.6"></script>
<script src="__PUBLIC__/js/layui/layui.all.js"></script>
<script src="__PUBLIC__/js/vue.js"></script>
<script src="__PUBLIC__/js/vue-resource.js"></script>
<script>
    var wall=new Vue({
        el:"#wall",
        data:{
            wishes:[],
            nickname:'',
            content:"",
        },
        methods:{
            push:function () {
                if (this.content!=='')
                    this.$http.post('AddWish',{nickname:this.nickname,content: this.content}).then(
                        (data)=>
                        {
                            if (data.body.result==='success') {
                                layer.msg('成功放飞心愿！');
                                location.reload();
                            }
                            else
                                layer.msg('失败咯');
                        },
                        (err)=>
                        {
                            layer.msg("失败咯");
                        }
                    )
            }
        },
        created:function () {
            this.$http.get('WallJson').then(
                (data)=>
                {
                    this.wishes=data.body;
                }
            )
        }
    })
</script>

</body>

</html>